<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
	.mystyle {
	     background:#FF0000;
	     font-size:30px
	}
</style>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript">
     //设置属性值
	$(function(){
		$("#btn1").click(function(){
		      $("#s1").text("<h1>欢迎学习jQuery!</h1>");
		      $("#s2").html("<h1>欢迎学习jQuery!</h1>");
		      $("#user").val("张三");
		      $("#city option:last").attr("selected","true");
		      $("#s3").addClass("mystyle");
		});
	});
	
	//示例2整体控制checkbox选中和取消
	$(function(){
		$("#checkAll").click(function(){
		    var status = $("#checkAll").attr("checked");
			$(":checkbox[name='loves']").attr("checked",status);
		});
	});
	//获取属性值
	$(function(){
		$("#btn2").click(function(){
		   alert($("#s3").text());//获取纯文本值
		   alert($("#s3").html());//获取html内容
			alert($("#user").val());//获取value属性值
			alert($("#city").val());
			alert($("#city option:selected").text());
		});
	});

</script>
	</head>
	<body>
		<h1>
			属性控制函数示例
		</h1>
		<input type="button" value="设置值" id="btn1">
		<input type="button" value="获取值" id="btn2">
		<hr />
		<input type="text" id="user" />
		<br>
		<select id="city">
			<option value="beijing">
				北京
			</option>
			<option value="shanghai">
				上海
			</option>
			<option value="chongqing">
				重庆
			</option>
		</select>
		<br>
		<span id="s3"><font>你好，新年快乐!</font>
		</span>
		<br />
		<span id="s1"></span>
		<br />
		<span id="s2"></span>
		<br />
		<hr />
		<input type="checkbox" name="checkAll" id="checkAll" />
		全部选中/取消
		<br />
		<input type="checkbox" name="loves" />
		郊游
		<input type="checkbox" name="loves" />
		上网
		<input type="checkbox" name="loves" />
		交友

	</body>
</html>
